<template>
  <div class="about">
    <div class="bg-dark text-white font-sans">

      <!-- 进度条 -->
      <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
        <div class="progress-line" id="progress-line"></div>
      </div>

      <!-- Hero区域 -->
      <section class="relative pt-24 pb-16 bg-darker overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-darker to-dark opacity-50"></div>

        <!-- 装饰元素 -->
        <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-20 w-96 h-96 bg-secondary/10 rounded-full blur-3xl"></div>

        <div class="container mx-auto px-4 relative z-10">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div class="order-2 md:order-1">
              <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                我们的<span class="text-primary">使命</span>与<span class="text-primary">愿景</span>
              </h1>
              <p class="text-gray-400 text-lg mb-8 leading-relaxed">
                狂速科技SAAS致力于为中小企业提供简单易用、功能强大的小程序解决方案，帮助企业快速搭建线上业务平台，降低技术门槛，提升运营效率。
              </p>
              <div class="flex flex-wrap gap-4">
                <a href="#team"
                   class="px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                  认识我们的团队
                </a>
                <a href="#contact"
                   class="px-8 py-3 bg-darker border border-gray-700 rounded-lg font-medium hover:border-primary transition-all">
                  联系我们
                </a>
              </div>
            </div>
            <div class="order-1 md:order-2 flex justify-center">
              <div class="relative">
                <div class="absolute inset-0 bg-gradient-blue rounded-full opacity-20 blur-xl animate-pulse-slow"></div>
                <img src="https://picsum.photos/600/600?random=10" alt="关于我们"
                     class="rounded-xl relative z-10 animate-float">
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 公司简介 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="max-w-3xl mx-auto text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">关于<span class="text-primary">狂速科技SAAS</span></h2>
            <p class="text-gray-400 leading-relaxed">
              狂速科技SAAS成立于2020年，是一家专注于为中小企业提供小程序开发与运营解决方案的科技公司。我们拥有一支由行业专家、技术精英和运营团队组成的专业队伍，致力于通过创新技术和优质服务，帮助企业快速实现数字化转型。
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="text-primary text-4xl mb-6">
                <i class="fa fa-lightbulb-o"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">我们的理念</h3>
              <p class="text-gray-400">
                以客户需求为中心，通过技术创新为企业创造价值，让数字化转型变得简单高效。
              </p>
            </div>

            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="text-primary text-4xl mb-6">
                <i class="fa fa-rocket"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">我们的目标</h3>
              <p class="text-gray-400">
                成为中小企业数字化转型的首选合作伙伴，帮助每一家企业在数字时代获得成功。
              </p>
            </div>

            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="text-primary text-4xl mb-6">
                <i class="fa fa-handshake-o"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">我们的承诺</h3>
              <p class="text-gray-400">
                提供稳定可靠的产品，专业高效的服务，与客户建立长期共赢的合作关系。
              </p>
            </div>
          </div>

          <!-- 数据统计 -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-20">
            <div class="text-center">
              <div class="text-4xl md:text-5xl font-bold text-primary mb-2" id="counter-clients">0</div>
              <p class="text-gray-400">企业客户</p>
            </div>

            <div class="text-center">
              <div class="text-4xl md:text-5xl font-bold text-primary mb-2" id="counter-projects">0</div>
              <p class="text-gray-400">成功项目</p>
            </div>

            <div class="text-center">
              <div class="text-4xl md:text-5xl font-bold text-primary mb-2" id="counter-platforms">0</div>
              <p class="text-gray-400">支持平台</p>
            </div>

            <div class="text-center">
              <div class="text-4xl md:text-5xl font-bold text-primary mb-2" id="counter-team">0</div>
              <p class="text-gray-400">团队成员</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 发展历程 -->
      <section class="py-20 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">发展<span class="text-primary">历程</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              回顾狂速科技SAAS的成长历程，每一步都凝聚着我们对技术的追求和对客户的承诺
            </p>
          </div>

          <div class="relative">
            <!-- 时间线 -->
            <div
                class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-gray-700 transform -translate-x-1/2"></div>

            <!-- 里程碑1 -->
            <div class="relative mb-20">
              <div class="md:flex items-center">
                <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                  <div class="bg-card p-6 rounded-xl hover-lift">
                    <h3 class="text-xl font-bold mb-2">公司成立</h3>
                    <p class="text-gray-400">2020年1月</p>
                    <p class="mt-4 text-gray-400">
                      狂速科技SAAS正式成立，核心团队组建完成，开始专注于小程序SAAS平台的研发。
                    </p>
                  </div>
                </div>
                <div
                    class="hidden md:block absolute left-1/2 top-1/2 w-6 h-6 bg-primary rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
                <div class="md:w-1/2 md:pl-12"></div>
              </div>
            </div>

            <!-- 里程碑2 -->
            <div class="relative mb-20">
              <div class="md:flex items-center">
                <div class="md:w-1/2 md:pr-12"></div>
                <div
                    class="hidden md:block absolute left-1/2 top-1/2 w-6 h-6 bg-primary rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
                <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                  <div class="bg-card p-6 rounded-xl hover-lift">
                    <h3 class="text-xl font-bold mb-2">产品上线</h3>
                    <p class="text-gray-400">2020年8月</p>
                    <p class="mt-4 text-gray-400">
                      狂速科技SAAS平台正式上线，推出基础版小程序解决方案，服务首批企业客户。
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 里程碑3 -->
            <div class="relative mb-20">
              <div class="md:flex items-center">
                <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                  <div class="bg-card p-6 rounded-xl hover-lift">
                    <h3 class="text-xl font-bold mb-2">获得天使轮融资</h3>
                    <p class="text-gray-400">2021年3月</p>
                    <p class="mt-4 text-gray-400">
                      获得天使轮融资，加速产品研发和市场推广，扩大团队规模。
                    </p>
                  </div>
                </div>
                <div
                    class="hidden md:block absolute left-1/2 top-1/2 w-6 h-6 bg-primary rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
                <div class="md:w-1/2 md:pl-12"></div>
              </div>
            </div>

            <!-- 里程碑4 -->
            <div class="relative mb-20">
              <div class="md:flex items-center">
                <div class="md:w-1/2 md:pr-12"></div>
                <div
                    class="hidden md:block absolute left-1/2 top-1/2 w-6 h-6 bg-primary rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
                <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                  <div class="bg-card p-6 rounded-xl hover-lift">
                    <h3 class="text-xl font-bold mb-2">多平台支持</h3>
                    <p class="text-gray-400">2021年10月</p>
                    <p class="mt-4 text-gray-400">
                      平台支持微信、支付宝、抖音等多平台小程序，客户数量突破1000家。
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 里程碑5 -->
            <div class="relative">
              <div class="md:flex items-center">
                <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                  <div class="bg-card p-6 rounded-xl hover-lift">
                    <h3 class="text-xl font-bold mb-2">企业版发布</h3>
                    <p class="text-gray-400">2022年6月</p>
                    <p class="mt-4 text-gray-400">
                      推出企业版解决方案，提供定制化开发和专属技术支持，服务中大型企业客户。
                    </p>
                  </div>
                </div>
                <div
                    class="hidden md:block absolute left-1/2 top-1/2 w-6 h-6 bg-primary rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
                <div class="md:w-1/2 md:pl-12"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 团队介绍 -->
      <section id="team" class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">我们的<span class="text-primary">团队</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              狂速科技SAAS拥有一支充满激情和创新精神的团队，团队成员来自互联网行业的顶尖企业，拥有丰富的技术和运营经验
            </p>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- 团队成员1 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <img src="https://picsum.photos/400/400?random=30" alt="张明 - CEO" class="w-full h-64 object-cover">
              <div class="p-6">
                <h3 class="text-xl font-bold mb-1">张明</h3>
                <p class="text-primary mb-4">创始人 & CEO</p>
                <p class="text-gray-400 text-sm mb-4">
                  前阿里巴巴高级产品经理，拥有10年互联网产品经验，主导过多个千万级用户产品的设计与开发。
                </p>
                <div class="flex space-x-3">
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-twitter"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-envelope"></i>
                  </a>
                </div>
              </div>
            </div>

            <!-- 团队成员2 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <img src="https://picsum.photos/400/400?random=31" alt="李婷 - CTO" class="w-full h-64 object-cover">
              <div class="p-6">
                <h3 class="text-xl font-bold mb-1">李婷</h3>
                <p class="text-primary mb-4">技术总监</p>
                <p class="text-gray-400 text-sm mb-4">
                  前腾讯高级工程师，15年技术经验，擅长分布式系统架构设计，主导过多个大型项目的技术架构。
                </p>
                <div class="flex space-x-3">
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-github"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-envelope"></i>
                  </a>
                </div>
              </div>
            </div>

            <!-- 团队成员3 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <img src="https://picsum.photos/400/400?random=32" alt="王强 - 运营总监" class="w-full h-64 object-cover">
              <div class="p-6">
                <h3 class="text-xl font-bold mb-1">王强</h3>
                <p class="text-primary mb-4">运营总监</p>
                <p class="text-gray-400 text-sm mb-4">
                  前美团高级运营经理，拥有8年互联网运营经验，成功打造多个爆款产品。
                </p>
                <div class="flex space-x-3">
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-twitter"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-envelope"></i>
                  </a>
                </div>
              </div>
            </div>

            <!-- 团队成员4 -->
            <div class="bg-card rounded-xl overflow-hidden hover-lift">
              <img src="https://picsum.photos/400/400?random=33" alt="赵悦 - 设计总监" class="w-full h-64 object-cover">
              <div class="p-6">
                <h3 class="text-xl font-bold mb-1">赵悦</h3>
                <p class="text-primary mb-4">设计总监</p>
                <p class="text-gray-400 text-sm mb-4">
                  前字节跳动资深设计师，擅长用户体验设计和品牌视觉设计，作品多次获得行业大奖。
                </p>
                <div class="flex space-x-3">
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-dribbble"></i>
                  </a>
                  <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-envelope"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系我们 -->
      <section id="contact" class="py-20 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">联系<span class="text-primary">我们</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              如果您有任何问题或合作意向，请随时联系我们，我们将竭诚为您服务。
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <div class="bg-card rounded-xl p-8">
                <h3 class="text-xl font-bold mb-6">联系信息</h3>
                <div class="space-y-4">
                  <div class="flex items-center">
                    <div
                        class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center text-primary mr-4">
                      <i class="fa fa-map-marker"></i>
                    </div>
                    <div>
                      <h4 class="font-semibold">公司地址</h4>
                      <p class="text-gray-400">北京市朝阳区XX路XX号XX大厦XX层</p>
                    </div>
                  </div>
                  <div class="flex items-center">
                    <div
                        class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center text-primary mr-4">
                      <i class="fa fa-phone"></i>
                    </div>
                    <div>
                      <h4 class="font-semibold">联系电话</h4>
                      <p class="text-gray-400">010 - 12345678</p>
                    </div>
                  </div>
                  <div class="flex items-center">
                    <div
                        class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center text-primary mr-4">
                      <i class="fa fa-envelope"></i>
                    </div>
                    <div>
                      <h4 class="font-semibold">电子邮箱</h4>
                      <p class="text-gray-400">contact@yunchuangsaas.com</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="bg-card rounded-xl p-8">
                <h3 class="text-xl font-bold mb-6">在线留言</h3>
                <form action="#" method="post">
                  <div class="space-y-4">
                    <input type="text" name="name" placeholder="您的姓名"
                           class="w-full bg-darker p-4 rounded-lg border border-gray-700 focus:border-primary focus:ring-0">
                    <input type="email" name="email" placeholder="您的邮箱"
                           class="w-full bg-darker p-4 rounded-lg border border-gray-700 focus:border-primary focus:ring-0">
                    <textarea name="message" rows="6" placeholder="您的留言"
                              class="w-full bg-darker p-4 rounded-lg border border-gray-700 focus:border-primary focus:ring-0"></textarea>
                    <button type="submit"
                            class="w-full px-6 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                      提交留言
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  layout: "default",
  name: "AboutView",
  data() {
    return {
      isMobileMenuOpen: false,
      progress: 0,
      counterClients: 0,
      counterProjects: 0,
      counterPlatforms: 0,
      counterTeam: 0
    };
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    updateProgressBar() {
      const winScroll = window.pageYOffset;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    },
    animateCounter(target, endValue, duration) {
      let startValue = 0;
      const startTime = performance.now();

      const updateCounter = (currentTime) => {
        const elapsedTime = currentTime - startTime;
        if (elapsedTime < duration) {
          const progress = elapsedTime / duration;
          const currentValue = Math.round(startValue + (endValue - startValue) * progress);
          this[target] = currentValue;
          requestAnimationFrame(updateCounter);
        } else {
          this[target] = endValue;
        }
      };

      requestAnimationFrame(updateCounter);
    },
    initCounters() {
      this.animateCounter('counterClients', 1500, 2000);
      this.animateCounter('counterProjects', 300, 2000);
      this.animateCounter('counterPlatforms', 5, 2000);
      this.animateCounter('counterTeam', 100, 2000);
    }
  },
  mounted() {
    // 移动端菜单切换
    // 由于移除了 document，直接绑定事件到方法
    // 进度条更新
    window.addEventListener('scroll', this.updateProgressBar);
    // 初始化计数器
    this.initCounters();
  },
  beforeDestroy() {
    // 移除事件监听器以避免内存泄漏
    window.removeEventListener('scroll', this.updateProgressBar);
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }

  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-15px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
}

</style>
